<template>
  <view>
    <u-popup v-model="show" mode="bottom" height="auto" :closeable="true">
      <view class="title"> 选择规格 </view>
      <view class="select">
        <view class="select-title"> 选择规格 </view>
        <view class="select-spu">
          <view
            v-for="(item, index) in data.spu"
            :key="index"
            :class="{ active: checked == index }"
            @click="changeSpe(index)"
          >
            {{ item.spu_name }}
          </view>
        </view>
        <view class="select-title"> 选择数量 </view>
        <div class="select-number">
          <my-stepper
            :val="willBuyNum"
            :min="min"
            :limit="limit"
            :inventory="max"
            @plus="addAction"
            @minus="subAction"
            @showKey="$refs.keyboard.open(data.is_standard, 0, min, max, limit)"
          >
          </my-stepper>
          <text v-if="min > 0">起订量：{{ min }}</text>
          <text v-if="limit > 0" style="margin-left: 20rpx"
            >库存：{{ max }}</text
          >
        </div>
      </view>

      <view class="button color" @click="addToCartad" v-if="immediately">
        立即购买
      </view>
      <view class="button" @click="addToCart" v-else> 添加到购物车 </view>
    </u-popup>
    <my-keyboard @confirm="inputPrice" ref="keyboard"></my-keyboard>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { $https } from "@/static/js/request.js";
export default {
  props: {
    canshowprice: {
      default: true,
    },
    immediately: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      show: false,
      data: {},
      checked: 0,
      spuId: null, //规格id
      showPrice: 0,
      unit: "",
      min: 0,
      max: 0,
      willBuyNum: 0,
      limit: null, //是否无限量供应，1有限制，会显示剩余库存
      desc: "", //描述
      current_price: null, //1时价
    };
  },
  computed: {
    ...mapState(["companyInfo"]),
  },
  methods: {
    open(data) {
      this.checked = 0;
      this.show = true;
      this.data = data;
      console.log("data11111", this.data);

      if (data.isJF) {
        this.showPrice = `${this.data.spu[0].market_price}积分`;
      }
      this.unit = data.spu[0].unit;
      this.spuId = data.spu[0].id;
      this.min = data.spu[0].minimum;
      this.max = data.spu[0].inventory_hd || data.spu[0].inventory_left;
      this.limit = data.spu[0].inventory_hd
        ? 1
        : data.spu[0].designated_inventory;
      this.willBuyNum = data.spu[0].cart_num ? data.spu[0].cart_num : this.min;
      this.desc = data.spu[0].describe;
      this.current_price = this.data.spu[0].current_price;
    },
    //选择规格
    changeSpe(index) {
      this.checked = index;
      this.spuId = this.data.spu[index].id;
      this.min = this.data.spu[index].minimum;
      this.max =
        this.data.spu[index].inventory_hd ||
        this.data.spu[index].inventory_left;
      this.limit = this.data.spu[index].inventory_hd
        ? 1
        : this.data.spu[index].designated_inventory;
      this.showPrice = this.data.spu[index].current_price
        ? "时价"
        : `￥${this.data.spu[index].market_price}`;
      this.showPrice = this.data.spu[index].activity_price || this.showPrice;
      this.unit = this.data.spu[index].unit;
      this.willBuyNum = this.data.spu[index].cart_num
        ? this.data.spu[index].cart_num
        : this.min;
      this.desc = this.data.spu[index].describe;
      this.current_price = this.data.spu[index].current_price;
    },
    //＋
    addAction(data) {
      var val = data.value;
      let min = Number(this.min),
        max = Number(this.max);
      if (val < min) {
        val = min;
      } else if (Number(this.limit) > 0 && val + 1 >= Number(max)) {
        //不能超过库存量
        val = max;
        uni.showToast({
          icon: "none",
          title: "库存不足",
        });
      } else {
        val++;
      }
      this.willBuyNum = Number(val.toFixed(2));
    },
    //-
    subAction(data) {
      var val = data.value;

      if (val - 1 < this.min) {
        val = 0;
      } else {
        val--;
      }
      this.willBuyNum = Number(val.toFixed(2));
    },
    //输入数量
    inputPrice(data) {
      this.willBuyNum = Number(data.value).toFixed(2);
    },

    // 直接购买
    addToCartad() {
      if (this.willBuyNum > 0) {
        // this.$emit('addtocart',this.data.id,this.spuId,this.willBuyNum,)
        var options = {
          goods_id: this.data.id,
          spu_id: this.spuId,
          num: this.willBuyNum,
        };
        console.log("111w3", options);
      } else {
        uni.showToast({
          title: "请选择规格和数量",
          icon: "none",
        });
      }
    },
    // 添加购物车
    addToCart() {
      if (this.willBuyNum > 0) {
        // this.$emit('addtocart',this.data.id,this.spuId,this.willBuyNum,)
        var options = {
          goods_id: this.data.id,
          spu_id: this.spuId,
          num: this.willBuyNum,
        };
        $https(
          "POST",
          `changeCart?company_id=${this.companyInfo.supplier_id}`,
          options,
          (res) => {
            if (res.data.errcode == 0) {
              this.data.willBuyNum = res.data.data.num_cart_count;
              this.$emit("tabBarTag", res.data.data.all_cart_num);
              this.show = false;
              uni.showToast({
                title: "添加成功",
                icon: "none",
              });
            } else {
              uni.showToast({
                title: res.data.errmsg,
                icon: "none",
              });
            }
          }
        );
      } else {
        uni.showToast({
          title: "请选择数量",
          icon: "none",
        });
      }
    },
  },
};
</script>


<style lang="scss">
.title {
  margin-top: 30rpx;
  text-align: center;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.select {
  padding: 50rpx 60rpx 30rpx;
  box-sizing: border-box;
  &-title {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  &-spu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    view {
      width: 180rpx;
      height: 70rpx;
      line-height: 70rpx;
      background: #f8f9fa;
      border-radius: 16rpx;
      margin: 10rpx;
    }
    .active {
      color: #40ae36;
    }
  }
  &-number {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    text {
      margin-left: 20rpx;
      font-size: 24rpx;
      color: #999999;
    }
  }
}
.button {
  width: 630rpx;
  height: 90rpx;
  background: #40ae36;
  border-radius: 45rpx;
  margin: 80rpx auto 30rpx;
  text-align: center;
  color: #ffffff;
  line-height: 90rpx;
}
.color {
  background-color: #f55726;
}
</style>